<template>
  <!--模板-->
  <el-button type="" @click="change">修改</el-button><br><br>
  {{ person }}<br><br> 
  {{ state10 }}<br><br> 
  {{  state11 }}<br><br> 
  {{  state12 }}<br><br> 
  {{  state13 }}<br><br> 
  {{  state14 }}<br><br> 
  {{  state20 }}<br><br> 
  {{  state21  }}<br><br> 

  <son-state></son-state>
</template>
 

<script setup lang="ts">

  import sonState from './22-state-local-son.vue'

  // 引入状态
  import usePerson from './state-person'

  // 引入测试状态
  import {
    useState10,
    useState11,
    useState12,
    useState13,
    useState14,
    useState20,
    useState21

  } from './state-fac'

  const person = usePerson()
  console.log('person', person)

  const change = () => {
    person.age += 1
  }

  const state10 = useState10()
  const state11 = useState11()
  const state12 = useState12()
  const state13 = useState13()
  const state14 = useState14()
  const state20 = useState20()
  const state21 = useState21()

  console.log('state10', state10)
  console.log('state11', state11)
  console.log('state12', state12)
  console.log('state13', state13)
  console.log('state14', state14)
  console.log('state20', state20)
  console.log('state21', state21)


</script>